<script setup lang="ts">
export interface BasicSectionProps {
  wrapperClass?: string
  title: string
  description: string
  bgImage?: string
  height?: number
  paddingTop?: number
}

withDefaults(defineProps<BasicSectionProps>(), {
  height: 819,
  paddingTop: 120
})
</script>
<template>
  <div
    class="basic-section"
    :class="[wrapperClass]"
    :style="{
      '--section-height': `${height}px`,
      '--section-padding-top': `${paddingTop}px`
    }"
  >
    <div class="fixed-container h-full">
      <h2 class="title">{{ title }}</h2>
      <p class="desctiption">{{ description }}</p>
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="less">
.basic-section {
  @apply bg-cover bg-center bg-no-repeat;
  height: var(--section-height);
  padding: var(--section-padding-top) 0 120px;

  .title,
  .desctiption {
    @apply my-0 py-0 text-center;
  }

  .title {
    @apply text-10 mb-2;
    line-height: 56px;
    font-family: 'PingFang SC medium';
  }
  .desctiption {
    @apply text-base font-normal mb-72px;
    line-height: 22px;
    color: #8a8e99;
  }
}
</style>
